<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            background-image: url('https://th.bing.com/th/id/R.9e45a633e95179a37c907fa2797999ad?rik=aMuPS4TunAh5ZA&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214Q2.jpg&ehk=P%2firfYpARc1fHht%2bWpapYR4W15p6SLABE8CBexoeon4%3d&risl=&pid=ImgRaw&r=0');
            background-size: cover;
            margin: 0;
        }
        .register-container {
            width: 350px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
        }
        .register-container h2 {
            margin-bottom: 20px;
            text-align: center;
            font-family: 'Lobster', cursive;
            color: #` + getRandomColor() + `;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #` + getRandomColor() + `;
            font-family: 'Lobster', cursive;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #` + getRandomColor() + `;
            border-radius: 5px;
        }
        .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .form-group button:hover {
            background-color: #45a049;
        }
        #sendCodeBtn {
            width: auto;
            padding: 10px;
            background-color: #4CAF50;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            margin-left: 250px;
            border-radius: 5px;
        }
        #sendCodeBtn:hover {
            background-color: #45a049;
        }
        .error-message {
            color: red;
            margin-top: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="register-container">
        <h2>注册</h2>
        <form id="registerForm">
            <div class="form-group">
                <label for="account">账号:</label>
                <input type="text" id="account" name="account" required>
            </div>
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <label for="confirmPassword">确认密码:</label>
                <input type="password" id="confirmPassword" name="confirmPassword" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" required>
                <button type="button" id="sendCodeBtn">发送验证码</button>
            </div>
            <div class="form-group">
                <label for="verificationCode">验证码:</label>
                <input type="text" id="verificationCode" name="verificationCode" required>
            </div>
            <div class="form-group">
                <button type="submit">注册</button>
            </div>
            <div class="error-message" id="errorMessage"></div>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        function getRandomColor() {
            return Math.floor(Math.random() * 16777215).toString(16);
        }

        document.querySelectorAll('.form-group input').forEach(element => {
            element.style.borderColor = `#${getRandomColor()}`;
        });
        document.querySelectorAll('.form-group label, .register-container h2').forEach(element => {
            element.style.color = `#${getRandomColor()}`;
        });

        document.getElementById('sendCodeBtn').addEventListener('click', function() {
            var email = document.getElementById('email').value;
            if (email) {
                fetch('http://192.168.78.248:5000/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        action: 'regist',
                        user_email: email
                    })
                }).then(response => response.json())
                .then(data => {
                    if (data.verification_code) {
                        Swal.fire(
                            '验证码已发送',
                            '验证码已发送至您的邮箱',
                            'success'
                        );
                        // 保存验证码以便验证
                        window.receivedCode = data.verification_code;
                    } else {
                        Swal.fire(
                            '发送失败',
                            '发送验证码失败，请重试',
                            'error'
                        );
                    }
                }).catch(error => {
                    console.error('Error:', error);
                    Swal.fire(
                        '发送失败',
                        '发送验证码失败，请重试',
                        'error'
                    );
                });
            } else {
                Swal.fire(
                    '请输入邮箱',
                    '请填写邮箱地址',
                    'warning'
                );
            }
        });

        document.getElementById('registerForm').addEventListener('submit', function(event) {
            event.preventDefault();
            var account = document.getElementById('account').value;
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var confirmPassword = document.getElementById('confirmPassword').value;
            var email = document.getElementById('email').value;
            var verificationCode = document.getElementById('verificationCode').value;

            if (password !== confirmPassword) {
                Swal.fire(
                    '两次输入的密码不一致',
                    '请确认两次输入的密码相同',
                    'error'
                );
                return;
            }

            try {
                var receivedCode = parseInt(window.receivedCode);
                var verifyCode = parseInt(verificationCode);

                fetch('http://192.168.78.248:5000/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        action: 'verify',
                        user_id: parseInt(account),
                        user_password: password,
                        user_name: username,
                        user_email: email,
                        code: receivedCode,
                        vetify_code: verifyCode
                    })
                }).then(response => response.json())
                .then(data => {
                    var errorMessage = document.getElementById('errorMessage');
                    if (data.message) {
                        Swal.fire(
                            '注册成功',
                            '恭喜您，注册成功！',
                            'success'
                        ).then(() => {
                            window.location.href = 'start.html';
                        });
                    } else {
                        errorMessage.style.display = 'block';
                        errorMessage.textContent = '注册失败: ' + data.error;
                    }
                }).catch(error => {
                    console.error('Error:', error);
                    var errorMessage = document.getElementById('errorMessage');
                    errorMessage.style.display = 'block';
                    errorMessage.textContent = '注册失败，请稍后再试。';
                });
            } catch (error) {
                Swal.fire(
                    '验证码错误',
                    '验证码解析错误，请重新发送验证码',
                    'error'
                );
            }
        });
    </script>
</body>
</html>
